<template>
  <view class="container">
    <!-- 顶部信息 -->
    <view class="header-info">
      <!-- 用户信息 -->
      <view class="user-info">
        <view :class="userInfo.profile ? 'avatar-box avatar-border' : 'avatar-box'">
          <image class="avatar" :src="userInfo.profile || 'https://www.thuguardian.com/files/small_program/avatat-default.png'"></image>
        </view>
        <view v-if="token" class="username">{{ userInfo.name }}</view>
        <view v-else class="username" @click="goLogin">登录或注册</view>
        <view v-if="token" class="creat-time">加入清新守护的第{{ joinDays }}天</view>
      </view>
    </view> 

    <!-- 我的模块 -->
    <!-- <view></view> -->
    <view class="content-box">
      <view
        class="content-item"
        v-for="(item, index) in mineList"
        :key="index"
        @click="handleMine(item)">
        <img class="icon" :src="item.icon" alt="">
        <view class="label">{{ item.title }}</view>
        <view v-if="item.title == '消息通知' && token" class="num">{{ readNum || 0 }}</view>
        <!-- <img class="icon-right" src="https://www.thuguardian.com/files/small_program/" alt=""> -->
        <!-- <div class="icon-right"> -->
          <van-icon color="rgba(0, 0, 0, .25)" name="arrow" />
        <!-- </div> -->
      </view>
    </view>
    
    <van-dialog id="van-dialog" class="dialog-content" />
  </view>
</template>

<script>
  // import { getCurrentPage } from '@/utils/index.js';
  import Dialog from '@/wxcomponents/vant/dialog/dialog';
  import { unreadNumbers } from '@/api/message/index.js'
  import { getInfo } from '@/api/common/index.js'

  export default {
    data() {
      return {
        token: '',
        pageNavRect: this.$systemTools.pageNavRect,
        userInfo: {
          username: '姓名',
          avatar: '',
          created_at: ''
        },
        mineList: [
          {
            title: '个人信息',
            icon: 'https://www.thuguardian.com/files/small_program/min-admin.png',
            path: '/pages/mine-information/main',
          },
          {
            title: '消息通知',
            icon: 'https://www.thuguardian.com/files/small_program/min-message.png',
            path: '/pages/message/main',
          },
          {
            title: '我的收藏',
            icon: 'https://www.thuguardian.com/files/small_program/min-collect.png',
            path: '/pages/collect/main',
          },
          {
            title: '退出登录',
            icon: 'https://www.thuguardian.com/files/small_program/min-logout.png'
          }
        ],
        readNum: 0
      };
    },
    onShow() {
      this.token = wx.getStorageSync('token');
      this.userInfo = wx.getStorageSync('userInfo')
      if (this.token) {
        this.handleNum()
        this.getUserInfo()
      }
    },
    computed: {
      joinDays() {
        let days = 0
        if (this.userInfo.created_at) {
          days = Math.floor((Math.round(new Date().getTime() / 1000) - this.userInfo.created_at) / 60 / 60 / 24) + 1
        }
        return days
      },
    },
    created() {
    },
    methods: {
      goLogin() {
        wx.navigateTo({
          url: '/pages/login/main'
        })
      },
      // 未读消息数量
      async handleNum () {
        const res = await unreadNumbers()
        if (res.code == 200) {
          this.readNum = res.data
        }
      },
      handleMine(item) {
        if (!this.token) {
          this.goLogin();
          return false;
        }
        if (item.title === '退出登录') {
          Dialog.confirm({
            context: this,
            title: '退出登录',
            message: '确定退出登录吗？',
            confirmButtonText: '确定',
            confirmButtonColor: '#00AFCB',
          })
          .then(() => {
            // 退出登录接口或者其他操作
            wx.clearStorageSync()
            wx.clearStorage()
            uni.showToast({ title: '退出成功', icon: 'success' })
            uni.switchTab({
              url: '/pages/index/main'
            })
          })
          .catch(() => {});
        } else {
          uni.navigateTo({ url: item.path });
        }
      },
      async getUserInfo() {
        const res = await getInfo()

        if (res.code === 200) {
          wx.setStorageSync('userInfo', res.data);
        }
      },
    },
  };
</script>


<style lang="less">
.container {
  /* display: flex;
  flex-direction: column; */
  padding: 0;
  padding-top: 80px;
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #FFF 33.08%);
  background: url('https://www.thuguardian.com/files/small_program/bg01.png') no-repeat;
  background-size: 100% auto;
  box-sizing: border-box;
}

.user-info {
  /* display: flex;
  align-items: center; */
  padding-top: 16px;
  margin-bottom: 20px;
  width: 100%;
  /* background: red; */
  position: relative;
}

.avatar-box {
  margin: 0 auto;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  box-sizing: border-box;
  overflow: hidden;
  &.avatar-border{
    border: 3px solid #fff;
  }
}
.avatar {
  display: block;
  width: 100%;
  height: 100%;
}

.username {
  margin-top: 24px;
  width: 100%;
  font-size: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, .85);
  text-align: center;
}
.creat-time {
  margin-top: 4px;
  width: 100%;
  text-align: center;
  color: rgba(0, 0, 0, .45);
  font-size: 18px;
}



.content-box {
  margin-top: 30px;
  width: 100%;
}

.content-item {
  padding: 0 28px;
  display: flex;
  align-items: center;
  height: 76px;
  box-sizing: content-box;
}
.icon {
  display: block;
  margin-right: 12px;
  width: 36px;
  height: 36px;
}
.label {
  margin-right: auto;
  font-size: 16px;
  color: rgba(0, 0, 0, .65);
}
.num {
  margin-right: 9px;
  color: rgba(0, 0, 0, .65);
}
.icon-right {
  display: block;
  margin-left: auto;
  width: 24px;
  height: 24px;
  background: #ccc;
}

</style>